### 第19课 网页远程控制校门
在智慧校园的建设浪潮中，智能管控与远程互联正成为校园现代化的重要标志。本项目以"网页远程控制校门开关"为主题，带领您深入探索物联网技术在校园安全管理中的创新应用。
现在开始，用技术守护校园安全，用创新构建智慧管理环境，共同探索物联网技术在教育领域的无限可能！
#### 19.1 工作原理
**手机浏览器 → WiFi → ESP32 → 控制舵机转动 → 校门开/关**
1. **手机/电脑** 打开网页（输入ESP32的IP地址）
2. **点击按钮**（开门/关门）
3. **ESP32收到指令**（通过WiFi）
4. **舵机转动**（180°或90°，对应校门开和关）
#### 19.2 流程图
#### 19.3 实验代码
⚠️ **特别提醒： 打开代码文件后，需要分别将代码中的 `YourWiFiSSID` 和 `YourWiFiPassword` 替换为您自己的 WiFi名称 和 WiFi密码。**
```c++
const char* ssid = "YourWiFiSSID"; // 修改为你的WiFi名称
const char* password = "YourWiFiPassword"; // 修改为你的WiFi密码
```
⚠️ **特别注意：请确保代码中的WiFi名称和WiFi密码与连接到您的电脑、手机/平板、ESP32开发板和路由器的网络相同，它们必须在同一局域网（WiFi）内。**
⚠️ **特别注意：WiFi必须是2.4Ghz频率的，否则ESP32无法连接WiFi。**
```c++
#include // 提供ESP32的WiFi连接功能
#include // 提供ESP32的Web服务器功能
#include // 专门用于ESP32的舵机控制库
#include // 专门用于OLED控制库
#include // 专门用于OLED控制库
// 设置WiFi名称和WiFi密码
const char* ssid = "YourWiFiSSID"; // 修改为你自己的WiFi名称
const char* password = "YourWiFiPassword"; // 修改为你自己的WiFi密码
WebServer server(80);
Servo myServo;
// 舵机控制引脚
const int servoPin = 32;
// OLED 配置
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_RESET -1 // 共享 I2C 重置操作
#define I2C_ADDRESS 0x3C // 默认0x3C地址
// 创建一个显示对象
Adafruit_SH1106G display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);
void handleRoot() {
// 发送 HTML 页面
String html = R"rawliteral(
ESP32 Servo Control
)rawliteral";
server.send(200, "text/html", html);
}
void handleControl() {
if (server.hasArg("angle")) {
int angle = server.arg("angle").toInt();
// 控制舵机使其旋转至指定角度
myServo.write(angle);
// 接收回复
String message = angle == 180 ? "Door opened" : "Door closed"; // 原始字符串字面量
server.send(200, "text/plain", message); // 发送HTML响应
Serial.print("Servo rotates to: ");
Serial.print(angle);
Serial.println("°");
} else {
server.send(400, "text/plain", "参数错误");
}
}
void setup() {
Serial.begin(9600);
Wire.begin(); // 初始化I2C总线
// 初始化 OLED
if(!display.begin(I2C_ADDRESS, true)) { // 真正的分辨率是 128x64
Serial.println("SH1106初始化失败");
while(1); // 陷入困境且无法继续前进
}
// 清空屏幕并设置文本属性
display.clearDisplay();
display.setTextSize(1); // 文本尺寸
display.setTextColor(SH110X_WHITE); // 单色显示
display.setCursor(0, 0); // 设定起始位置
// 允许 ESP32 使用舵机
ESP32PWM::allocateTimer(0);
ESP32PWM::allocateTimer(1);
ESP32PWM::allocateTimer(2);
ESP32PWM::allocateTimer(3);
// 连接WiFi
WiFi.begin(ssid, password);
Serial.print("正在连接WiFi...");
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("已连接Wi-Fi.");
Serial.print("IP: ");
Serial.println(WiFi.localIP());
display.print("IP: ");
display.println(WiFi.localIP());
display.display();
// 设置舵机
myServo.setPeriodHertz(50); // 标准 50 赫兹舵机系统
myServo.attach(servoPin, 500, 2400); // 连接到舵机引脚，并设置最小和最大脉冲宽度
// 将舵机的位置初始化至校门关闭状态(90°)
myServo.write(90);
// 设置路由器
server.on("/", handleRoot);
server.on("/control", handleControl);
// 启动服务器
server.begin();
Serial.println("HTTP服务器已启动");
}
void loop() {
server.handleClient();
}
```
#### 19.4 代码说明
**注意：此课程涉及HTML、CSS、JS等课外知识， 只做简单介绍。**
**1. 库引入详解**
```c++
#include // 提供ESP32的WiFi连接功能
#include // 提供ESP32的Web服务器功能
#include // 专门用于ESP32的舵机控制库
```
- **WiFi.h**：使ESP32能够连接无线网络，作为Web服务器
- **WebServer.h**：让ESP32能够处理HTTP请求和响应
- **ESP32Servo.h**：简化舵机控制，提供高级API控制舵机角度
**2. 常量和全局变量定义**
```c++
// 网络凭证 - 需要用户修改的部分
const char* ssid = "YourWiFiSSID"; // WiFi名称
const char* password = "YourWiFiPassword"; // WiFi密码
WebServer server(80); // 创建Web服务器实例，监听80端口(HTTP默认端口)
Servo myServo; // 创建舵机对象实例
const int servoPin = 32; // 舵机信号线连接的GPIO引脚
```
**3. 网页请求处理函数**
**handleRoot()函数**
此函数处理对根路径("/")的请求，返回完整的HTML页面：
```c++
void handleRoot() {
String message = angle == 180 ? "Door opened" : "Door closed"; // 原始字符串字面量
server.send(200, "text/plain", message); // 发送HTML响应
}
```
**页面结构**:
- 包含标题 "校门控制"
- 两个控制按钮(开门和关门)
- 状态显示区域
**handleControl()函数**
处理控制请求("/control"):
```c++
void handleControl() {
if (server.hasArg("angle")) {
int angle = server.arg("angle").toInt();
// 控制舵机使其旋转至指定角度
myServo.write(angle);
// 接收回复
String message = angle == 180 ? "Door opened" : "Door closed"; // 原始字符串字面量
server.send(200, "text/plain", message); // 发送HTML响应
Serial.print("Servo rotates to: ");
Serial.print(angle);
Serial.println("°");
} else {
server.send(400, "text/plain", "参数错误");
}
}
```
**4. setup()函数详解**
```c++
void setup() {
Serial.begin(9600);
Wire.begin(); // 初始化I2C总线
// 初始化 OLED
if(!display.begin(I2C_ADDRESS, true)) { // 真正的分辨率是 128x64
Serial.println("SH1106初始化失败");
while(1); // 陷入困境且无法继续前进
}
// 清空屏幕并设置文本属性
display.clearDisplay();
display.setTextSize(1); // 文本尺寸
display.setTextColor(SH110X_WHITE); // 单色显示
display.setCursor(0, 0); // 设定起始位置
// 允许 ESP32 使用舵机
ESP32PWM::allocateTimer(0);
ESP32PWM::allocateTimer(1);
ESP32PWM::allocateTimer(2);
ESP32PWM::allocateTimer(3);
// 连接WiFi
WiFi.begin(ssid, password);
Serial.print("正在连接WiFi...");
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("已连接Wi-Fi.");
Serial.print("IP: ");
Serial.println(WiFi.localIP());
display.print("IP: ");
display.println(WiFi.localIP());
display.display();
// 设置舵机
myServo.setPeriodHertz(50); // 标准 50 赫兹舵机系统
myServo.attach(servoPin, 500, 2400); // 连接到舵机引脚，并设置最小和最大脉冲宽度
// 将舵机的位置初始化至校门关闭状态(90°)
myServo.write(90);
// 设置路由器
server.on("/", handleRoot);
server.on("/control", handleControl);
// 启动服务器
server.begin();
Serial.println("HTTP服务器已启动");
}
```
**5. loop()函数**
```c++
void loop() {
server.handleClient(); // 处理客户端请求
}
```
此函数不断检查并处理来自客户端的HTTP请求，保持Web服务器运行。
#### 19.5 实验结果
1. 外接电源，选择好正确的开发板板型（ESP32 Dev Module）和 适当的串口端口（COMxx），然后单击按钮上传代码。代码上传成功后，设置波特率为 `9600`，可以看到打印的IP地址 (如果看不到，可以按下复位按键重新连接一次)：
OLED显示屏上同步显示IP地址：
2. 在手机/电脑的浏览器中输入IP地址即可访问校门控制页面。
⚠️ 注意：确保手机/电脑与ESP32连接到同一个 WiFi 。
- 打开校门：开门按钮
- 关闭校门：关门按钮
- 状态：显示当前校门的开关状态
#### 19.6 常见问题解决
1. 若串口监视器无任何信息打印，请按下ESP32主板的复位键：
2. 若ESP32 一直没有获取到 IP 地址，通常是因为 WiFi 连接失败，解决办法：
- 确保代码里的 WiFi 名称和 WiFi密码已经替换为您自己的 Wi-Fi名称 和 WiFi密码。
- 确保你的 WiFi 网络是 2.4GHz 的，ESP32不支持 5GHz WiFi。
3. 若输入IP地址无页面，解决办法：
- 确保IP地址输入正确。
- 检查手机/电脑是否与ESP32在同一网络。